<template>
  <!-- 能够正确触发,但是没有显示图表,待解决 -->
  <!-- <div class="lodaing" v-if="city !== searchCity">
    <h2>天气信息加载中...</h2>
  </div> -->
  <!-- <div class="lodaRes" v-else> -->
  <div class="lodaRes">
    <h2>
      你正在预览{{ route.query.city }}的天气信息
      <span v-if="!searchCityExist(route.query.adcode)"
        >, 可以通过右上角的+号按钮保存起来</span
      >
    </h2>
    <h2>当日气温是: {{ chartWeatherDays[0].daytemp }}摄氏度</h2>
    <h2>当日天气是: {{ chartWeatherDays[0].dayweather }}</h2>
    <h2>当前风向是: {{ chartWeatherDays[0].daywind }}风</h2>
    <h2>
      当日风力是:
      {{
        chartWeatherDays[0].daypower == '1-3'
          ? '≤3'
          : chartWeatherDays[0].daypower
      }}级
    </h2>
    <hr />
    <div class="chartBox">
      <WeatherCharts />
    </div>
  </div>
</template>

<script setup>
import { onMounted, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
import { useWeatherStore } from '@/stores/weather.js'
// import { getAdcodeWeather } from '@/api'
import WeatherCharts from '@/components/WeatherCharts.vue'

const store = useWeatherStore()
const { chartWeatherDays } = storeToRefs(store)
const { updateAdcode, searchCityExist } = store

// 获取路由实例
const route = useRoute()

// 直接访问 query 参数
const city = route.query.adcode

// console.log(city)
// console.log(searchCity.value)

// const searchRes = ref({})

onMounted(async () => {
  // console.log(storageCtiys.value)

  //   searchRes.value = (await getAdcodeWeather(city, 'all')).forecasts[0].casts
  //   searchRes.value = await getAdcodeWeather(city, 'base')
  //   console.log(searchRes.value)
  //   searchCityWeather.value = searchRes.value[0]
  //   console.log(searchCityWeather.value)
  await updateAdcode(city)

  //   console.log(ipWeatherLives.value)
  //   console.log(chartWeatherDays.value)
})
</script>

<style lang="scss" scoped>
.lodaing {
  text-align: center;
  color: #fff;
  margin-top: 0px;
  padding-top: 0px;
}
.lodaRes {
  text-align: center;
  .chartBox {
    padding: 20px 180px;
  }
  h2 {
    color: #fff;
    height: 40px;
    line-height: 40px;
    &:first-child {
      background-color: #004e71;
    }
  }
  hr {
    border: 0.5px solid #1a7696;
  }
}
</style>
